<template>
  <main class="user-info-page" ref="userInfoPage">
    <el-form class="user-info">
      <div class="flex items-center justify-between mb-4">
        <h1 class="title">账号管理：</h1>
        <el-button link @click="isEdit = true" v-if="!isEdit">编辑</el-button>
        <div v-else>
          <el-button link @click="changeUserInfo(form)">保存</el-button>
          <el-button link @click="isEdit = false">取消</el-button>
        </div>
      </div>
      <section class="flex justify-center">
        <upload
          :data="{ userId: userInfo?.id }"
          :imageUrl="userInfo?.imgUrl ?? ''"
          :api="uploadApi.uploadUserImg"
          borderRadius="50%"
          height="100px"
          width="100px"
          @update:imageUrl="handleChange"
          @delete:imageUrl="handleDelete"
          @imgLoad:imageColor="handleImgLoad" />
      </section>
      <section>
        <el-form-item class="item-label" label="用户状态" :label-width="LabelWidth">
          {{ userInfo?.status ? '正常' : '冻结' }}
        </el-form-item>
        <el-form-item class="item-label" label="用户名" :label-width="LabelWidth">
          <el-input class="input-item" v-model="form.name" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item class="item-label" label="手机号" :label-width="LabelWidth">
          <el-input class="input-item" v-model="form.mobile" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item class="item-label" label="邮箱" :label-width="LabelWidth">
          <el-input class="input-item" v-model="form.email" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item class="item-label" label="在线简历" :label-width="LabelWidth">
          <el-input class="input-item" v-model="form.curriculumVitae" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item class="item-label" label="角色" :label-width="LabelWidth">
          <el-tag type="info" effect="dark" class="mr-2" v-for="role in userInfo?.roles" :key="role.id">
            {{ role.description }}
          </el-tag>
        </el-form-item>
        <div class="flex justify-end">
          <el-button size="small" type="danger" @click="isShowPassword = true">修改密码</el-button>
        </div>
      </section>
    </el-form>

    <el-dialog title="修改密码" v-model="isShowPassword" width="30%">
      <el-form>
        <el-form-item class="item-label" label="密码" :label-width="LabelWidth">
          <el-input class="input-item" v-model="passwordForm.password" type="password" />
        </el-form-item>
        <el-form-item class="item-label" label="确认密码" :label-width="LabelWidth">
          <el-input class="input-item" v-model="passwordForm.password_confirm" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="">
          <el-button @click="isShowPassword = false">取消</el-button>
          <el-button type="primary" @click="changePassword">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </main>
</template>

<script setup lang="ts">
import type { UserApiType } from '@/apis/user/namespace';
import userStroe from '@/plugins/pinia/stores/user';
import uploadApi from '@/apis/upload';
import { removeEmptyStrings } from '@/utils/common';
import { ElMessage } from 'element-plus';

// 获取页面元素
const userInfoPage = ref<HTMLElement>();

// 用户信息
const userInfo = computed(() => userStroe().userInfo);

// 定义常量: 标签宽度
const LabelWidth = '80px';

// 定义变量: 是否显示密码弹窗
const isShowPassword = ref(false);

// 定义变量: 用户信息
const form = ref({
  name: userInfo.value?.name ?? '',
  email: userInfo.value?.email ?? '',
  mobile: userInfo.value?.mobile ?? '',
  curriculumVitae: userInfo.value?.curriculumVitae ?? '',
});

const passwordForm = ref({
  password: '',
  password_confirm: '',
});

// 定义变量: 是否编辑
const isEdit = ref(false);

// 修改用户信息
const changeUserInfo = (params: UserApiType.ChangeInfo) => {
  ElMessageBox.confirm('确认修改用户信息？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      params = removeEmptyStrings(params);
      await userStroe().changeUserInfo(params);
    })
    .then(() => {
      isEdit.value = false;
      isShowPassword.value = false;
    });
};

// 密码修改
const changePassword = () => {
  if (passwordForm.value.password !== passwordForm.value.password_confirm) {
    ElMessage.warning('两次输入的密码不一致');
    return;
  }
  ElMessageBox.confirm('确认修改密码？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await userStroe().changePassword(passwordForm.value);
    })
    .then(() => {
      isShowPassword.value = false;
    });
};

// 图片上传回调
const handleChange = async () => {
  await userStroe().getUserInfo();
};

const handleDelete = async () => {
  ElMessageBox.confirm('确认删除头像？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    userStroe().changeUserInfo({ imgUrl: '' });
  });
};

// 图片加载完成, 改变背景颜色
const handleImgLoad = (value: string[]) => {
  if (!userInfoPage.value) return;
  userInfoPage.value.style.setProperty('--bg-color1', value[0]);
  userInfoPage.value.style.setProperty('--bg-color2', value[1]);
  userInfoPage.value.style.setProperty('--bg-color3', value[2]);
};
</script>

<style scoped lang="scss">
.user-info-page {
  --bg-color1: #f5f5f5;
  --bg-color2: #f5f5f5;
  --bg-color3: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background: linear-gradient(to top right, var(--bg-color1), var(--bg-color2), var(--bg-color3));
  .user-info {
    width: 30rem;
    height: fit-content;
    padding: 2rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    .title {
      font-size: 1.5rem;
      font-weight: bold;
      color: #2f4058;
    }
    .user-info-content {
      display: flex;
      align-items: center;
    }
    .item-label {
      .input-item {
        opacity: 0.6;
      }
    }
  }
}
</style>
